<template>
  <div class="payfor">
    <div class="top">
      <i class="el-icon-arrow-left" @click="goBack" style="z-index:20"></i>
      <div class="title">订单确认</div>
    </div>
    <div class="spacing"></div>
    <div class="shop">
      <div class="tab_pan">
        <div :class="{active:isSelf}">自提</div>
        <!--<div :class="{active:!isSelf}" @click="sendType">楼内配送</div>-->
      </div>
      <div class="content" v-show="isSelf">
        <div class="s-name">店铺：{{shop.name}}</div>
        <div class="s-address">地址：{{shop.address}}</div>
        <div class="s-time">营业时间：{{shop.opened_at}}:00 - {{shop.closed_at}}:00</div>
      </div>
      <div class="content" v-show="!isSelf">
        <div @click="pickSite">选择地址</div>

      </div>
    </div>
    <div class="spacing"></div>
    <div class="carts">
      <div class="title">- 商品信息 -</div>
      <div v-for="car in carts" class="carItem">
        <div class="c-name">{{car.goods.name}}</div>
        <div class="price">
          <div v-if="car.goods_sku">￥{{car.goods_sku.price_discount}}</div>
          <div v-if="!car.goods_sku">￥{{car.goods.price_discount}}</div>
          <div>x{{car.count}}</div>
        </div>
      </div>
    </div>
    <div class="spacing"></div>
    <div class="mark">
      <el-input
        type="textarea"
        autosize
        placeholder="可以把备注告诉我们哦"
        v-model="remark">
      </el-input>
    </div>
    <div class="spacing"></div>
    <div class="payType">
      <div>支付方式</div>
      <div class="wxpay">
        <div class="left">
          <i class="el-icon-circle-check" style="color: #00be00;font-size: 30px"></i>
          <div>微信支付</div>
        </div>
        <i class="el-icon-circle-check-outline"></i>
      </div>
    </div>
    <div class="act"></div>
    <div class="act bottom">
      <div class="count">实付:<span>￥{{totalPrice.toFixed(2)}}</span></div>
      <div class="topay" @click="payit">去支付</div>
    </div>
    <v-address ref="address"></v-address>
  </div>
</template>

<script>
  import {_post} from '@/api/mainApi';
  import Address from 'components/Address/Address';

  export default {
    name: 'Payfor',
    computed: {
      totalPrice() { // 计算总价格
        let total = 0;
        this.carts.forEach((item) => {
          if (item.goods_sku) {
            total += item.goods_sku.price_discount * item.count;
          } else {
            total += item.goods.price_discount * item.count;
          }
        });
        return total;
      }
    },
    data() {
      return {
        shop: this.$store.state.shop,
        isSelf: true,
        carts: [],
        remark: '',
        radio: '1',
        cart_ids: []
      };
    },
    created() {
      this.getCart();
    },
    components: {
      'v-address': Address
    },
    methods: {
      sendType() {
        this.isSelf = !this.isSelf;
      },
      getCart() {
        _post('frontend/cart/index', {}).then(res => {
          let data = res.data;
          console.log('cartlist', data);
          this.carts = data.data.data;
          this.carts.every(item => {
            this.cart_ids.push(item.id);
            return true;
          });
        });
      },
      goBack() {
        this.$router.go(-1);
      },
      pickSite() {
        this.$refs.address.initShow();
      },
      onBridgeReady(json) {
        const that = this;
        window.WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            'appId': json.appId, // 公众号名称，由商户传入
            'timeStamp': json.timeStamp, // 时间戳，自1970年以来的秒数
            'nonceStr': json.nonceStr, // 随机串
            'package': json.package,
            'signType': json.signType, // 微信签名方式：
            'paySign': json.paySign// 微信签名
          }, res => {
            console.log('pay-it', res);
            this.$router.push({name: 'order', params: ''});
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              console.log('支付成功');
              // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              let params = {
                carName: that.dataPrice[that.activeIndex].lev,
                date: that.child.selectDate,
                price: that.dataPrice[that.activeIndex].price,
                depAddress: that.child.addresName,
                arrAddress: that.child.backAddresname
              };
              this.$router.push({name: 'order', params: params});
            } else {
              // 失败
              this.$message.error('支付失败, 请稍后重试');
            }
          });
      },
      payit() {
        const sendType = this.isSelf === true ? 1 : 2;
        _post('frontend/order/create', {
          cart_ids: this.cart_ids,
          member_address_id: 4,
          send_type: sendType,
          remark: this.remark
        }).then(res => {
          console.log('payit', res);
          const json = res.data.data;
          if (typeof WeixinJSBridge === 'undefined') {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(json), false);
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(json));
              document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(json));
            }
          } else {
            this.onBridgeReady(json);
          }
          // WeixinJSBridge.invoke(
          //   'getBrandWCPayRequest',
          //   res.data,
          //   function (res) {
          //     if (res.err_msg === 'get_brand_wcpay_request:ok') {
          //       alert('成功');
          //     }
          //   });
        });
      }

    }
  };
</script>

<style scoped>
  .payfor {
    position: relative;
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .spacing {
    width: 100%;
    height: 10px;
    background: #eef2f6;
  }

  .top {
    display: flex;
    align-items: center;
    height: 40px;
  }

  .top i {
    font-size: 20px;
    font-weight: bolder;
    margin-left: 10px;
  }

  .top .title {
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    height: 40px;
    line-height: 40px;
  }

  .shop {
    min-height: 120px;
  }

  .tab_pan {
    display: flex;
  }

  .tab_pan > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #d9dde1;
    margin: 10px 0px;
    margin-left: 15px;
    font-size: 14px;
  }

  .tab_pan > div.active {
    color: #ffffff;
    background: #bfa272;
    border: 1px solid #fff;
  }

  .c-name {
    font-size: 14px;
  }

  .carts {
    padding: 10px 6px;
    min-height: 120px;
  }

  .carts .title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #2b333b;
  }

  .carItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    color: #4d555d;
    padding: 0 6px;
  }

  .carItem .price {
    display: flex;
    justify-content: space-between;
    min-width: 100px;
  }

  .carItem .price div:nth-child(1) {
    color: red;
  }

  .payType {
    padding: 20px 6px 0;
  }

  .wxpay {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #bbc1c7;
  }

  .wxpay .left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 120px;
    margin: 10px 0;
  }

  .act {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .act.bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
    border-top: 1px solid rgba(212, 214, 217, 0.87);
  }

  .act .count {
    font-size: 12px;
    margin-left: 6px;
  }

  .act .count span {
    color: #f45300;
    font-size: 15px;
  }

  .act .topay {
    width: 100px;
    height: 100%;
    background: rgba(187, 133, 0, 0.66);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .content {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 0 0px 10px 20px;
    font-size: 16px;
    color: #07111b;
  }

  .content > div {
    margin: 5px 0;
  }

  .content .s-name {
    color: #030307;
  }

  .content .s-address {
    font-size: 14px;
  }

  .content .s-time {
    font-size: 14px;
  }
</style>
